<template>
    <el-form ref="loginFormRefs" :model="ruleForm" :rules="rules" class="demo-ruleForm">
        <el-form-item suffix-icon="icon iconfont el-icon-user-fill" prop="email">
            <el-input v-model="ruleForm.email"  placeholder="请输入企业邮箱" clearable>
                <template #prefix>
                    <i class="icon iconfont el-icon-user-fill"></i>
                </template>
            </el-input>
        </el-form-item>
        <el-form-item prop="password">
            <el-input v-model="ruleForm.password" placeholder="请输入密码（初次登录默认密码）" show-password clearable>
                <template #prefix>
                <i class="icon iconfont el-icon-password"></i>
                </template>
            </el-input>
        </el-form-item>
        
        <el-form-item>
            <el-button type="primary" :loading="loading" @click="submitForm" style="width:100%">登录</el-button>
        </el-form-item>
    </el-form>   
</template>

<script setup>
import {reactive, ref } from "vue"
import {useRouter} from "vue-router"
import {useStore} from 'vuex'


const store = useStore()
const router = useRouter()


const rules = reactive({
    email: [
        {required: true, message: '用户名不能为空', trigger: 'blur'}
    ],
    password: [
        {required: true, message: '密码不能为空', trigger: 'blur'}
    ]
})


// 登录loding
const loading = ref(false)

// 邮箱登录dom
const loginFormRefs = ref()

// 邮箱登录表单
const ruleForm = reactive({
})


// 邮箱登录
function submitForm () {
    loginFormRefs.value.validate((val) => {
        if (val) {
            loading.value = true
            store.dispatch('login', ruleForm).then(res => {
                console.log(res)
                loading.value = false
                console.log(router.push)
                router.push('/')
            }, err => {
                console.log('失败了', err)
                loading.value = false
                console.log(router.push)

                router.push('/')
            })
        }
    })
}
</script>


<style lang="scss" scoped>
.demo-ruleForm{
    width: 400px;
}
</style>